<template>
  <el-dialog
    v-model="dialogVisible"
    title="明细"
    width="640"
    :before-close="handleClose"
    append-to-body
    destroy-on-close
  >
    <el-descriptions title="" border :column="2">
      <el-descriptions-item label="菜单名称">
        {{ data?.name }}
      </el-descriptions-item>
      <el-descriptions-item label="菜单key">
        {{ data?.key }}
      </el-descriptions-item>
      <el-descriptions-item label="菜单路径">
        {{ data?.path }}
      </el-descriptions-item>
      <el-descriptions-item label="父级菜单">
        {{ data?.parentInfo?.name }}
      </el-descriptions-item>
      <el-descriptions-item label="菜单类型">
        {{ data?.menuTypeInfo?.label }}
      </el-descriptions-item>
      <el-descriptions-item label="菜单图标">
        <RenderMenuIcon :icon="data?.icon" />
      </el-descriptions-item>
      <el-descriptions-item label="菜单排序">
        {{ data?.order }}
      </el-descriptions-item>
      <el-descriptions-item label="创建时间">
        {{ data?.createdAt }}
      </el-descriptions-item>
      <el-descriptions-item label="更新时间">
        {{ data?.updatedAt }}
      </el-descriptions-item>
    </el-descriptions>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="js" setup>
import { ref } from "vue"

const dialogVisible = ref(false)

const handleClose = done => {
  done()
  dialogVisible.value = false
}

const data = ref()

const open = ({ row } = {}) => {
  data.value = row
  dialogVisible.value = true
}

defineExpose({
  open,
})
</script>
